@@include('include/head.html')
<style>
h3{
    margin-bottom: 20px;
}
h3+.aiui-row{
    margin-bottom: 10px;
}
</style>
<div class="baui-tab baui-tab-brief baui-shadow" baui-filter="docDemoTabBrief">
    <div class="baui-tab-wrap">
        <div class="baui-tab-nav-scoll">
            <ul class="baui-tab-header">
                <li class="baui-active">通知组件</li>
            </ul>
        </div>
    </div>
    <div class="baui-tab-content">
        <h3>1.基本使用</h3>
        <div class="aiui-row">
            <button class="aiui-btn aiui-btn-default" id="info">普通消息</button>
            <button class="aiui-btn aiui-btn-default" id="title">只有标题</button>
        </div>
        <h3>2.自定义主题</h3>
        <div class="aiui-row">
            <button class="aiui-btn aiui-btn-default" id="info1">普通消息</button>
            <button class="aiui-btn aiui-btn-success" id="success">成功提示</button>
            <button class="aiui-btn aiui-btn-warning" id="warning">警告提示</button>
            <button class="aiui-btn aiui-btn-error" id="error">错误提示</button>
        </div>
        <h3>3.自定义时间</h3>
        <div class="aiui-row">
            <button class="aiui-btn aiui-btn-default" id="duration">10秒后关闭</button>
        </div>
        <h3>4.添加关闭按钮</h3>
        <div class="aiui-row">
            <button class="aiui-btn aiui-btn-default" id="hidclose">没有关闭按钮</button>
        </div>
        <h3>5.外部关闭</h3>
        <div class="aiui-row">
            <button class="aiui-btn aiui-btn-default" id="open">打开</button>
            <button class="aiui-btn aiui-btn-default" id="close">关闭</button>
        </div>
    </div>
</div>
<script>
aiui.use(['popup'],function(popup){
    document.getElementById('info').addEventListener('click',function(e){
        popup.notice('这是普通提示',{
            content:'我是提示内容'
        });
    });
    document.getElementById('title').addEventListener('click',function(e){
        popup.notice("这是只有标题");
    });

    document.getElementById('info1').addEventListener('click',function(e){
        popup.notice('info主题',{
            icon:'info',
            content:'这是带有消息提示倾向'
        });
    });
    document.getElementById('success').addEventListener('click',function(e){
        popup.notice('success主题',{
            icon:'success',
            content:'这是带有成功倾向'
        });
    });
    document.getElementById('warning').addEventListener('click',function(e){
        popup.notice('warning主题',{
            icon:'warning',
            content:'这是带有预警倾向'
        });
    });
    document.getElementById('error').addEventListener('click',function(e){
        popup.notice('error主题',{
            icon:'error',
            content:'这是带有错误倾向'
        });
    });

    document.getElementById('duration').addEventListener('click',function(e){
        popup.notice('10秒后我才会被关闭',{
            content:'10秒后我才会被关闭哦',
            duration:'10000',
        });
    });
    document.getElementById('hidclose').addEventListener('click',function(e){
        popup.notice('提示',{
            content:'我没有关闭按钮',
            showClose:false,
        });
    });
    var index = '';
    document.getElementById('open').addEventListener('click',function(e){
        index = popup.notice('提示',{
            content:'我需要外部关闭我',
            showClose:false,
            duration:0
        });
    });
    document.getElementById('close').addEventListener('click',function(e){
        popup.close(index);
    });
})
</script>
@@include('include/foot.html')